﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/css/framework-font.css" rel="stylesheet" />
    <link href="~/css/framework-theme.css" rel="stylesheet" />
    <script src="~/lib/jquery/1.12.4/jquery.min.js"></script>
    <script src="~/lib/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="~/lib/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/lib/wdtree/tree.js"></script>
    <link href="~/lib/wdtree/tree.css" rel="stylesheet" />
    <link href="~/lib/select2/select2.min.css" rel="stylesheet" />
    <script src="~/lib/select2/select2.min.js"></script>
    <script src="~/lib/laydate/laydate.js"></script>
    <script src="~/lib/moment/moment.js"></script>
    <link href="~/lib/wizard/wizard.css" rel="stylesheet" />
    <script src="~/lib/wizard/wizard.js"></script>
    <script src="~/lib/validate/jquery.validate.min.js"></script>
    <script src="~/lib/datepicker/WdatePicker.js"></script>
    <script src="~/lib/jqgrid/5.3.0/i18n/grid.locale-cn.js"></script>
    <link href="~/css/framework-ui.css" rel="stylesheet" />
    <script src="~/js/framework-ui.js"></script>
</head>
<body>
    <form id="form1">
        <div class="widget-body">
            <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
                <ul class="steps">
                    <li data-target="#step-1" class="active"><span class="step">1</span>角色信息<span class="chevron"></span></li>
                    <li data-target="#step-2"><span class="step">2</span>功能权限<span class="chevron"></span></li>
                </ul>
            </div>
            <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
                <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">
                    <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                        <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                        请填写角色信息，用于创建或修改角色信息！
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">表单信息</h3>
                        </div>
                        <div class="panel-body" style="width: 98%;">
                            <table class="form">
                                <tr>
                                    <th class="formTitle">归属组织</th>
                                    <td class="formValue">
                                        <select id="OrganizeId" name="OrganizeId" class="form-control required"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">角色名称</th>
                                    <td class="formValue">
                                        <input id="FullName" name="FullName" type="text" class="form-control required" placeholder="请输入角色名称" />
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">角色编号</th>
                                    <td class="formValue">
                                        <input id="EnCode" name="EnCode" type="text" class="form-control required" placeholder="请输入角色编号" />
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">角色类型</th>
                                    <td class="formValue">
                                        <select id="ObjectType" name="ObjectType" class="form-control required"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">显示顺序</th>
                                    <td class="formValue">
                                        <input id="SortCode" name="SortCode" type="text" class="form-control required" placeholder="请输入显示顺序" />
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle" style="height: 35px;">选项</th>
                                    <td class="formValue" style="padding-top: 1px;">
                                        <div class="ckbox">
                                            <input id="AllowEdit" name="AllowEdit" type="checkbox"><label for="AllowEdit">允许编辑</label>
                                        </div>
                                        <div class="ckbox">
                                            <input id="AllowDelete" name="AllowDelete" type="checkbox"><label for="AllowDelete">允许删除</label>
                                        </div>
                                        <div class="ckbox">
                                            <input id="EnabledMark" name="EnabledMark" type="checkbox" checked="checked"><label for="EnabledMark">有效</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                                        备注
                                    </th>
                                    <td class="formValue">
                                        <textarea id="Description" name="Description" class="form-control" style="height: 60px;"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="step-pane" id="step-2">
                    <div id="permissionTree"></div>
                </div>
            </div>
            <div class="form-button" id="wizard-actions">
                <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
                <a id="btn_next" class="btn btn-default btn-next">下一步</a>
                <a id="btn_finish" class="btn btn-default" style="display: none;" onclick="submitForm()">完成</a>
            </div>
        </div>
    </form>
    <script>
        var keyValue = $.request("keyValue");
        $(function () {
            initControl();
            if (!!keyValue) {
                $.ajax({
                    url: "/SystemManage/Role/GetFormJson",
                    data: { keyValue: keyValue },
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("#form1").formSerialize(data);
                        //$("#form1").find('.form-control,select,input').attr('readonly', 'readonly');
                        //$("#form1").find('div.ckbox label').attr('for', '');
                    }
                });
            }
        })
        function initControl() {
            $("#OrganizeId").bindSelect({
                url: "/SystemManage/Organize/GetTreeSelectJson",
            });

            $("#ObjectType").bindSelect({
                url: "/SystemManage/DictItem/GetSelectJson",
                param: { enCode: "RoleType" }
            });
            $('#wizard').wizard().on('change', function (e, data) {
                var $finish = $("#btn_finish");
                var $next = $("#btn_next");
                if (data.direction == "next") {
                    switch (data.step) {
                        case 1:
                            if (!$('#form1').formValid()) {
                                return false;
                            }
                            $finish.show();
                            $next.hide();
                            break;
                        default:
                            break;
                    }
                } else {
                    $finish.hide();
                    $next.show();
                }
            });
            $("#permissionTree").treeview({
                height: 444,
                showcheck: true,
                url: "/SystemManage/Permission/GetRolePermissionTree",
                param: { roleId: keyValue }
            });
        }
        function submitForm() {
            var postData = $("#form1").formSerialize();
            postData["resourceIds"] = String($("#permissionTree").getCheckedNodes());
            $.submitForm({
                url: "/SystemManage/Role/SubmitForm?keyValue=" + keyValue,
                param: postData,
                success: function () {
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                }
            });
        }
    </script>
</body>
</html>
